<template>
  <div class="add-post-transfer">
    <el-form :ref="forms" :model="forms" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="forms.name" placeholder="姓名" type="text"/>
      </el-form-item>
      <el-form-item label="目前所在岗位" prop="stationNow">
        <el-select v-model="forms.stationNow" placeholder="请选择">
          <el-option
              v-for="item in stations"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="申请调动岗位" prop="stationToTransfer">
        <el-select v-model="forms.stationToTransfer" placeholder="请选择">
          <el-option
              v-for="item in stations"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请原因" prop="transferReason">
        <el-input v-model="forms.transferReason" maxlength="300" placeholder="申请原因" show-word-limit type="textarea"/>
      </el-form-item>
      <el-form-item label="调动类型" prop="transferType">
        <el-select v-model="forms.transferType" placeholder="请选择">
          <el-option
              v-for="item in transferTypeEnum"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请日期" prop="applyDate">
        <el-date-picker
            v-model="forms.applyDate"
            align="right"
            format="yyyy 年 MM 月 dd 日"
            placeholder="申请日期"
            type="date"
            value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(forms)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addPostTransfer} from "@/utils/api";
import {postGetList} from "@/utils/post";

export default {
  name: "AddPostTransfer",
  data() {
    return {
      forms: {
        name: "",
        stationNow: "",
        stationToTransfer: "",
        transferReason: "",
        transferType: "",
        applyDate: "",

      },
      rules: {},
      // stations: [{
      //   value: '初级开发',
      //   label: '初级开发'
      // },
      //   {
      //   value: '高级开发',
      //   label: '高级开发'
      // }, {
      //   value: '产品',
      //   label: '产品'
      // }, {
      //   value: '运营',
      //   label: '运营'
      // }],
      stations: [],
      transferTypeEnum: [{
        value: '升职',
        label: '升职'
      }, {
        value: '贬谪',
        label: '贬谪'
      }]
    };
  },
  methods: {
    async fetchList() {
      const res = await postGetList({search: this.search})
      if (res.status === 'success') {
        this.stations = res.data.map((e) => {
          return {value: e.postName, label: e.postName}
        })
      }
    },
    onSubmit(forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          addPostTransfer(forms).then((response) => {
            if (response && response.status === "success") {
              this.$message.success(response.message);
            }
          });
        }
      });
    },
  },
  created() {
    this.fetchList()
  }
};
</script>

<style scoped>
.add-post-transfer {
  text-align: center;
}

.el-form {
  max-width: 400px;
  margin: 100px auto;
}
</style>